<script setup>
import { ref } from 'vue';
import router from '@/router/index.js';
import { RndInt, RndStr } from '@/util/rnd.js';
import { encryptDes } from '@/util/des.js';
import { toFormData, REQU, useResp } from '@/net/requ.js';
import { message } from 'ant-design-vue';

const sending = ref(false);
const isRemember = ref(false);

// { userName: 'admin', password: 'zl872511' }
const formState = ref({ userName: '', password: '' });
const rules = {
  userName: [ { required: true, message: '请输入账号', trigger: 'change' } ],
  password: [ { required: true, message: '请输入密码', trigger: 'change' } ],
};

function setRemember() {
  isRemember.value
  ? localStorage.setItem('acctSignIn', JSON.stringify({
      formState: R.mapObjIndexed(btoa, formState.value),
      isRemember: Number(isRemember.value),
    }))
  : localStorage.removeItem('acctSignIn');
}

function onSubmit() {
  const RequBody = (() => {
    const timestamp = RndStr(8, () => RndInt(0,10));
    return R.compose( toFormData, R.mergeRight({ timestamp }), R.mapObjIndexed(v => encryptDes(timestamp, v)) );
  })();

  sending.value = true;
  REQU('/api/web/login', {
    method: 'POST',
    body: RequBody(formState.value)
  })
  .then(useResp({
    succ: result => {
      localStorage.setItem('userInfo', JSON.stringify(result.data));
      localStorage.setItem('accessToken', result.data.accessToken);
      // 避免登录后进入任务详情不进入数据详情
      R.compose( R.forEach(k => localStorage.removeItem(k)), R.without(['acctSignIn', 'userInfo', 'accessToken']), R.keys )(localStorage)
      isRemember.value && setRemember();
      router.push('/task');
    },
    fail: result => {
      message.error(result.message);
      sending.value = false;
    }
  }))
  .catch(() => {
    sending.value = false;
  });
}

function main() {
  // 获取用户记住的用户名密码
  if (!localStorage.getItem('acctSignIn')) { return; }

  const o = JSON.parse(localStorage.getItem('acctSignIn'));
  formState.value = R.mapObjIndexed(atob, o.formState);
  isRemember.value = Boolean(o.isRemember);
}

main();
</script>

<template>
  <a-form
    :model="formState"
    :rules="rules">
    <a-form-item name="userName">
      <a-input
        size="large"
        v-model:value="formState.userName"
        :disabled="sending"
        placeholder="请输入账号/手机号/邮箱"
        autocomplete="off">
      </a-input>
    </a-form-item>

    <a-form-item name="password">
      <a-input-password
        size="large"
        v-model:value="formState.password"
        :disabled="sending"
        placeholder="请输入登录密码"
        autocomplete="off">
      </a-input-password>
    </a-form-item>

    <a-checkbox
      v-model:checked="isRemember"
      :disabled="sending"
      @change="event => {
        isRemember = event.target.checked;
        setRemember();
      }">
      记住密码
    </a-checkbox>

    <a-button
      type="primary"
      size="large"
      block
      shape="round"
      html-type="submit"
      @click="onSubmit"
      :disabled="sending">
      登录
    </a-button>
  </a-form>
</template>
